<template>
  <van-cell
    :to="{
      // 路由的name
      name: 'Article',
      params: {
        articleId: articleItem.art_id
      }
    }"
  >
    <div slot="title">
      <h4 class="articleTitle">{{ articleItem.title }}</h4>
      <div v-if="articleItem.cover.type === 3" class="img-warp">
        <van-image
          v-for="(item, index) in articleItem.cover.images"
          :key="index"
          :src="articleItem.cover.images[index]"
          class="imgItem"
        ></van-image>
      </div>
    </div>
    <div slot="label" class="span-wrap">
      <span>{{ articleItem.aut_name }}</span>
      <span>{{ articleItem.comm_count }}条评论</span>
      <span>{{ articleItem.pubdate | relativeTime }}</span>
    </div>
    <div v-if="articleItem.cover.type === 1" slot="default">
      <van-image
        width="100"
        height="100"
        :src="articleItem.cover.images[0]"
      ></van-image>
    </div>
  </van-cell>
</template>

<script>
export default {
  name: 'ArticleItem',
  props: {
    articleItem: {
        type: Object,
        require: true,
        default: null
    }
   }
}
</script>

<style scope lang="less">
.img-warp {
    display: flex;
    height: 163px;
    margin-bottom: 32px;
  .imgItem {
      flex:1;
      &:not(:last-of-type) {
        padding-right: 5px
    }
  }
}
.articleTitle {
    font-size: 32px;
    width: 480px;
    margin-bottom: 32px;
}
.span-wrap {
    span {
        margin: 0 10px
    }
}
</style>
